<!--
 * @Author: your name
 * @Date: 2021-07-20 18:47:34
 * @LastEditTime: 2021-11-09 11:05:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\views\Feedback\components\turnDemand.vue
-->
<template>
  <div>
    <el-form :model="turnDemandForm" ref="turnDemandForm" label-width="150px" label-position="top">
      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属产品" class="ProductionName">
            <el-input v-model="productName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="所需模块" class="Marketing">
            <el-select v-model="turnDemandForm.module" placeholder="请选择所需模块">
              <el-option
                v-for="(item, index) in ModuleList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属计划" class="ProductionName">
            <el-select v-model="turnDemandForm.plan" placeholder="请选择所属计划">
              <el-option
                v-for="(item, index) in ListProductPlan"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="需求来源" class="Marketing">
            <el-select v-model="turnDemandForm.source" placeholder="请选择需求来源">
              <el-option
                v-for="(item, index) in SourceList"
                :key="index"
                :label="item.valueName"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="来源备注" class="sourceExtra">
            <el-input v-model="turnDemandForm.sourceNote" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 占位div -->
      <div style="height: 5px"></div>
      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-form-item class="isDing" label="是否定制化">
            <div class="questionDesc"></div>
            <el-select v-model="turnDemandForm.customFlag" placeholder="请选择需求来源">
              <el-option
                v-for="(item, index) in customFlagList"
                :key="index"
                :label="item.valueName"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="由谁评审" class="Marketing">
            <el-select v-model="turnDemandForm.assignedto" placeholder="请选择由谁评审">
              <el-option v-for="(item, index) in userList" :key="index" :label="item.name" :value="item.account"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="checkDemand">
          <el-form-item>
            <el-checkbox v-model="turnDemandForm.needDemand">不需要评审</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="定制化说明" class="sourceExtra">
            <el-input v-model="turnDemandForm.customNote" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- 占位div -->
        <div style="height: 8px"></div>
        <el-col :span="24">
          <el-form-item label="需求备注" class="sourceExtra">
            <el-input v-model="turnDemandForm.remark" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 占位div -->
      <div style="height: 8px"></div>
      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-form-item label="需求名称" class="Marketing">
            <el-input v-model="turnDemandForm.title"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="优先级" class="Marketing">
            <el-select v-model="turnDemandForm.pri" placeholder="请选择优先级">
              <el-option
                v-for="(item, index) in PriList"
                :key="index"
                :label="item.valueName"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="预计" class="Marketing">
            <el-input v-model="turnDemandForm.estimate" placeholder="请输入预计时间(小时)"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="需求描述" class="demandRecording">
            <el-input
              v-model="turnDemandForm.spec"
              type="textarea"
              placeholder="程序版本(必填):
问题描述(必填)：
故障日志(必填)”
初步分析报告(必填):
附件需上传(必填)：

            "
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 占位div -->
      <div style="height: 10px"></div>
      <el-row>
        <el-col :span="24">
          <el-form-item label="验收标准" class="sourceExtra">
            <el-input v-model="turnDemandForm.verify" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 占位div -->
      <div style="height: 10px"></div>
      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-form-item label="抄送人" class="Marketing">
            <el-select v-model="turnDemandForm.mailto" placeholder="请选择抄送人">
              <el-option v-for="(item, index) in userList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="紧急程度" class="Marketing">
            <el-select v-model="turnDemandForm.keywords" placeholder="请选择紧急程度">
              <el-option
                v-for="(item, index) in UrgentList"
                :key="index"
                :label="item.valueName"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="添加附件" class="uploadFiles">
            <br />
            <el-upload class="upload-demo" :action="fileUpload" multiple :limit="3">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {},
    data() {
        return {
            productName: '',

            turnDemandForm: {
                module: '',
                attachFileIds: [],
                editorFileIds: [],

                branch: 0,
                plan: '',
                source: '',
                assignedto: '',
                sourceNote: '',
                customFlag: '',
                openedby: '35965',
                customNote: '',
                remark: '',
                title: '',
                pri: '',
                product: '',
                estimate: '',
                spec: '',
                verify: '',
                mailto: '',
                keywords: ''
            },
            /*
      //反馈Id
private String feedBackId;

//由谁评审
private String assignedto;

//附件Id资源列表
private Integer[] attachFileIds;

//产品分支
private Integer branch;

//是否定制化
private String customFlag;

//定制化说明
private String customNote;

//文本编辑器资源列表
private Integer[] editorFileIds;

//预计
private Integer estimate;

//紧急程度
private String keywords;

//抄送给
private String mailto;

//所属模块
private Integer module;

//创建人
private String openedby;

//所属计划
private String plan;

//优先级
private String pri;

//所属产品
private Integer product;

//需求备注
private String remark;

//需求来源
private String source;

//来源备注
private String sourceNote;

//需求描述
private String spec;

//需求名称
private String title;

//验收标准
private String verify;

    */

            /* 禅道 */
            PID: '',
            // 禅道定制化
            customFlagList: [],
            // 禅道用户列表
            zenTaoUserList: [],
            // 人员列表
            userList: [],
            // 产品详情
            productInfo: {},
            // 禅道计划
            ListProductPlan: [],
            // 禅道模块
            ModuleList: [],
            // 优先级
            PriList: [],
            // 禅道来源
            SourceList: [],
            // 紧急程度
            UrgentList: [],
            // 禅道 产品关联项目
            ProjectList: [],
            // 禅道 文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/zentao/file/upload`
        }
    },
    props: {
        feedBackId: {
            type: String
        },
        productID: {
            type: String
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
    // this.GetCustomFlagList();
        console.log(this.productID)
        this.GetUserList() // 人员信息
        this.GetProductInfo() // 产品详情
        this.GetCustomFlagList() // 禅道定制化
        this.GetListProductPlan() // 禅道计划
        this.GetModuleList() // 禅道模块
        this.GetPriList() // 优先级
        this.GetSourceList() // 需求来源
        this.GetUrgentList() // 紧急程度
        this.GetProjectList() // 产品关联项目
    },
    methods: {
    /* 获得表单数据 */
        getForm() {
            this.$emit('func', this.turnDemandForm)
        },

        /* 禅道定制化 */
        async GetCustomFlagList() {
            try {
                const result = await FeedBack.GetCustomFlagList()
                if (result.success) {
                    this.customFlagList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 用户列表 */
        async GetListAllUser() {
            try {
                const result = await FeedBack.GetListAllUser()
                if (result.success) {
                    this.zenTaoUserList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 所属计划 */

        /* 根据产品ID  获得人员列表*/

        async GetUserList() {
            try {
                const result = await FeedBack.GetListItemAsync({ id: this.productID })
                if (result.success) {
                    this.userList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 根据产品ID 获取产品详情 */
        async GetProductInfo() {
            try {
                const result = await FeedBack.GetProductInfo({
                    productId: this.productID
                })
                if (result.success) {
                    this.productInfo = result.data
                    this.productName = this.productInfo.name
                    console.log(result.data)
                    this.PID = result.data.productId
                    this.turnDemandForm.product = result.data.productId
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 计划 */
        async GetListProductPlan() {
            try {
                const result = await FeedBack.GetListProductPlan({ productId: this.PID })
                if (result.success) {
                    this.ListProductPlan = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 模块 */
        async GetModuleList() {
            try {
                const result = await FeedBack.GetModuleList({ productId: this.PID })
                if (result.success) {
                    this.ModuleList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 优先级 */
        async GetPriList() {
            try {
                const result = await FeedBack.GetPriList()
                if (result.success) {
                    this.PriList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 需求来源 */

        async GetSourceList() {
            try {
                const result = await FeedBack.GetSourceList()
                if (result.success) {
                    this.SourceList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 紧急程度 */

        async GetUrgentList() {
            try {
                const result = await FeedBack.GetUrgentList()
                if (result.success) {
                    this.UrgentList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 产品关联项目 */
        async GetProjectList() {
            try {
                const result = await FeedBack.GetProjectList({ productId: this.PID })
                if (result.success) {
                    this.ProjectList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        }
    }
}
</script>

<style scoped lang="less" src="./commonForm.less"></style>

<style lang="less" scoped>
/* 来源说明 */
::v-deep .sourceExtra textarea {
  margin-top: 10px;
  height: 70px;
}

/* 需求描述 */
::v-deep .demandRecording textarea {
  margin-top: 10px;
  height: 207px;
}

.isDing .el-radio-group {
  position: relative;
  right: 0px;
  top: 0px;

  .firstRadio {
    margin-right: 60px;
  }
}

.checkDemand .el-checkbox {
  display: flex;
  align-items: center;
  margin-top: 40px;
  font-size: 12px;

  font-weight: 400;
  color: #999999;
}
</style>
